import React from "react";
import {PageContainer, ProColumns, ProTable} from "@ant-design/pro-components";
import {Button, Card, message, Space, Tag} from "antd";
import CdAdd from "@/pages/Devops/CD/cdAdd";


const CDIndex: React.FC = () => {

  const [cdAddVisible, setCdAddVisible] = React.useState<boolean>(false)


  /*持续部署*/
  const columns: ProColumns<Record<string, any>, "text">[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'indexBorder',
      // width: 48,
    },
    // {
    //   title: '应用',
    //   dataIndex: 'appName'
    // },
    {
      title: '环境',
      dataIndex: 'env',
      valueType: "select",
      valueEnum: {
        "test": {text: '测试', status: 'Default'},
        "prod": {text: '生产', status: 'Success'},
        "gray": {text: '预发', status: 'Processing'},
        "dev": {text: '开发', status: 'Error'},
      },
      renderFormItem: (_, {defaultRender, ...rest}, form) => {
        return defaultRender(_);
      },
      // render: (_, record) => (
      //   <Space>
      //     <Tag color={"blue"} key={record.env}>
      //       {record.env}
      //     </Tag>
      //   </Space>
      // ),
    },
    {
      title: '镜像',
      dataIndex: 'image',
      copyable: true

    },
    {
      title: '操作人',
      dataIndex: 'operator'

    },
    {
      title: '创建时间',
      dataIndex: 'createTime'
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            message.success('aaa')
          }}
        >
          验收
        </a>,
      ],
    }
  ]; // 表格列配置
  const dataSource = [
    {
      index: 1,
      appName: 'app1',
      env: 'dev',
      image: 'app1/image:1.1.1',
      operator: '张三',
      createTime: '2022-01-01 12:00:00'

    },
    {
      index: 2,
      appName: 'app2',
      env: 'test',
      image: 'app2/image:1.1.1',
      operator: '李四',
      createTime: '2022-01-02 12:00:00'
    }
  ]


  return (
    <PageContainer title={false}>

      <div style={{height: '100vh'}}>
        <ProTable columns={columns} dataSource={dataSource} size={"small"}
                  toolbar={{
                    title: '部署记录',
                    // 操作按钮
                    actions: [
                      <Button type={"primary"} onClick={() => setCdAddVisible(true)}>创建部署</Button>
                      // <a key="run">部署</a>,
                      // <a key="stop">回滚</a>,
                      // <a key="edit">编辑</a>,
                      // <a key="delete">删除</a>,
                    ],
                  }}
        />
      </div>


      <CdAdd onOpenChange={setCdAddVisible} open={cdAddVisible}/>

    </PageContainer>
  )
}
export default CDIndex;
